// 首先，创建一个场景
/**
 * 我们需要这样几个对象：
 *    场景、相机、渲染器
 */
let scene = new THREE.Scene(); // 创建场景实例

/**
 * 创建了一个相机，threejs里有几种不同的相机，这里是 远景相机也叫透视相机
 * 一参：视野角度，单位 deg
 * 二参：长宽比
 * 三参：进截面
 * 四参：远截面  当物体某些部分比相机的进截面进或者比远截面远时不会被渲染
 */
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);

/**
 * 创建渲染器，这里是 WebGL 渲染器，当浏览器不支持时，可以使用其他几种老旧渲染器降级
 */
let renderer = new THREE.WebGLRenderer();
// 设置渲染器渲染范围，当性能要求较高时，可以设定更小的渲染范围
// 将第三个参数 updateStyle 设置为 false 时，可以以较低的分辨率来渲染
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的 dom 元素 （canvas）放入文档流
document.body.appendChild(renderer.domElement);

// 下面让我们来添加一个 立方体
// 创建一个立方体对象，立方体对象包含了所有顶点和面
let geometry = new THREE.BoxGeometry(1, 1, 1);

/**
 * three.js 自带了几种材质，这里我们使用 MeshBasicMaterial 材质，
 * 材质实例应含有一个对象（参数对象），用于描述可用于材质属性的键值对
 * 我们这里简单的给出一个 color 属性并复制为 0x00ff00，即绿色
 */
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

/**
 * 之后，我们需要一个 Mesh，其中包含了一个几何体，以及作用于这个几何体的材质
 */
let cube = new THREE.Mesh( geometry, material );
// 网格对象可以直接放入场景中，并且可以自由移动
// 默认情况下，放入的立方体会被添加到（0，0，0）坐标，与相机重合，因此需要移动一个相机的位置
scene.add( cube );

// 将相机向外移动
camera.position.z = 5;

/**
 * 上面我们定义了，渲染场景、相机、渲染器、立方体模型与材质
 * 是时候开始正式渲染立方体了
 * 这时，我们需要借助一个叫做“渲染循环”或“动画循环”的方法
 */
function animate () {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // 若此时你直接查看html，会发现，有一个绿色的正方形渲染在屏幕上，但说好的3D呢？
  // 不用急，此时看到的是立方体的一个面，因为正视图的原因，看起来就像一个2D图形

  // 下面我们让它旋转起来
  cube.rotation.x += .01;
  cube.rotation.y += .01;

  // 确实变了，如果你想象力强，不难发现这确实是一个立方体在旋转
  // 但总感觉有哪里不对，这因为各个面的亮度一致，看起来像一个不停变换的多边形
  // 当我们学习光影渲染后，可以更好的呈现 3D 效果
}

animate();